<template>
    <div class="recommended-business">
        <el-collapse-transition>
            <div 
            v-if="showASearch"
            class="business-nav"
            >
                <select-module 
                    ref="province" 
                    label="注册省：" 
                    :options="provinces" 
                    :keyName="`valueid`" 
                    :contentName="`valuename`" 
                    :def-active="$store.getters['city/usersProvince'].valuename" 
                    single
                    v-model="provinceIds"
                    @click="provinceClickHandler"
                ></select-module>

                <select-module
                    ref="city"
                    label="注册地："
                    :options="cityListByProvinceSel || cities"
                    :keyName="`valueid`"
                    :contentName="`valuename`"
                    :def-active="$store.state.city.usersCityName"
                    v-model="cityNames"
                    @click="cityAfterQuery"
                ></select-module>

                <select-module
                    ref="dw"
                    label="单位类型："
                    :options="dwList"
                    :keyName="`type`"
                    :contentName="`dwname`"
                    v-model="dwTypes"
                    @click="dwAfterQuery"
                ></select-module>

                <select-checkbox
                    ref="qy"
                    label="企业类型："
                    :options="qyList"
                    :keyName="`valuename`"
                    :contentName="`valuename`"
                    v-model="qyNames"
                    @click="qylxAfterQuery"
                ></select-checkbox>

                <select-checkbox
                    ref="qyState"
                    label="企业状态："
                    :options="qyStateList"
                    :keyName="`dwname`"
                    :contentName="`dwname`"
                    v-model="qyStateNames"
                    @click="qyztAfterQuery"
                ></select-checkbox>
            </div>
        </el-collapse-transition>

        <el-divider></el-divider>

        <div class="business-content">
            <skeleton 
            :loading="loadingController" 
            >
                <template v-if="tableData && tableData.length > 0">
                    <div class="items" v-for="(item , ind) in tableData" :key="ind">
                        <content-item
                        :data="item"
                        :title="`${ind+1}.${item.searchname}`"
                        :rowguid="item.guid"
                        :icon="'&#xeca2;'"
                        @titleClick="titleClick"
                        v-czc="['首页', '点击列表', '企业列表', ind , 'home-list-businessList']"
                        >   
                            <span slot="time"></span>  

                            <template slot="content">
                                <div class="item-info">
                                    <div class="info-row">
                                        <div class="col">
                                            <el-link type="info" :underline="false">法定代表人：{{item.legalpersonname || '-'}}</el-link>
                                        </div>
                                        <div class="col">
                                            <el-link type="info" :underline="false">
                                                注册资本：{{item.regcapital || '-'}}<span v-show="!!item.regcapital">{{item.regcapitalunit}}</span>
                                            </el-link>
                                        </div>
                                        <div class="col">
                                            <el-link type="info" :underline="false">成立日期：{{item.estiblishtime || '-'}}</el-link>
                                        </div>
                                    </div>

                                    <div class="info-row">
                                        <div class="col">
                                            <el-link type="info" :underline="false">联系方式：{{item.phonenumber || '-'}}</el-link>
                                        </div>
                                    </div>

                                    <div class="info-row">
                                        <div class="col">
                                            <el-link type="info" :underline="false">地址：{{item.reglocation || '-'}}</el-link>
                                        </div>
                                    </div>
                                </div>
                            </template>

                            <template slot="tag">
                                <el-tag v-if="!!item.regstatus" size="small" :type="item.regstatus == '正常' ? 'success' : 'primary'">{{item.regstatus}}</el-tag>
                            </template>

                            <template slot="icon">
                                <collect-star
                                    :data="{objectguid: item.guid, objectname: item.name, objecttype: 'enterprise', marktype: 'follow',}"
                                    :defaultVal="item.bj === '1'"
                                ></collect-star>
                            </template>
                            
                        </content-item>
                    </div>
                </template>

                <empty-list v-if="!tableData.length">
                    <span>暂无数据</span>
                </empty-list>

            </skeleton>
        </div>

        <my-pagination
            class="pagination"
            ref="page"
            v-model="tableData"
            :action="`${$store.state.api.tbUrl}/searchrelated/qylist.json`"
            :search="pgData"
            :auto-show="false"
            :afterQuery="businessAfterQuery"
            :loading.sync="loadingController"
        ></my-pagination>
    </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

import notice from '@/mixins/notice.js';

import Skeleton from '../../../components/skeleton.vue';
import selectModule from "../../../components/select-module.vue";
import selectMultipletModule from "../../../components/select-multiple-module.vue";
import selectCheckbox from '../../../components/select-checkbox.vue';
import contentItem from "../../../components/item.vue";
import EmptyList from "@components/sys/empty-list";
import CollectStar from '@components/sys/collect.vue';

export default {
    mixins: [notice],
    props:{
        searchStr:{
            type:String,
            default:''
        },
        showASearch: {
            type: Boolean,
            default: false,
        },
    },
    components: {
        Skeleton,
        selectModule,
        selectMultipletModule,
        selectCheckbox,
        contentItem,
        EmptyList,
        CollectStar,
    },
    data() {
        return {
            loadingController: true,

            tableData:[],
            cityListByProvinceSel: null,
            
            provinceIds:[],
            cityNames: [],
            transferCityIds: [],    // cityNames 与 pgData.area 中转
            noticeList: [],
            noticeIds: [],
            dwList: [
                {
                    type:'cgdw',
                    dwname:'采购单位'
                },
                {
                    type:'tbqy',
                    dwname:'投标企业'
                },
                {
                    type:'zbdl',
                    dwname:'招标代理机构'
                },

            ],
            dwTypes: [],

            qyList:[
                // {
                //     type:'yxzr',
                //     dwname:'有限责任公司'
                // },
                // {
                //     type:'gf',
                //     dwname:'股份有限公司'
                // },
                // {
                //     type:'yxhh',
                //     dwname:'有限合伙'
                // },
                // {
                //     type:'pthh',
                //     dwname:'普通合伙'
                // },
            ],
            qyNames:[],

            qyStateList:[
                {
                    type:'cunx',
                    dwname:'存续（正常、开业、在业）'
                },
                {
                    type:'dx',
                    dwname:'吊销'
                },
                {
                    type:'zx',
                    dwname:'注销'
                },
                {
                    type:'chex',
                    dwname:'撤销'
                },
            ],
            qyStateNames:[],
            qyStateNamesnew:[],

            defCity:'',
        };
    },
    computed: {
        ...mapGetters({
            provinces: 'city/getProvinces',
            cities: "city/getCities",
        }),
        pgData:function(){
            return {
                pagesize:10,
                company:this.searchStr,
                // city:this.cityNames.toString(),
                city: this.transferCityIds.toString(),
                dwtype:this.dwTypes.toString(),
                orgType:this.qyNames.toString(),
                // dwstatus:this.qyStateNames.toString(),
                dwstatus:this.qyStateNamesnew.toString()
            }
        },

    },
    watch:{
        qyStateNames:{
            handler:function(n,o){
                this.qyStateNamesnew = clone(n);
                if(this.qyStateNamesnew.indexOf('存续（正常、开业、在业）') != '-1'){
                    let index = this.qyStateNamesnew.indexOf('存续（正常、开业、在业）')
                    this.qyStateNamesnew[index] = '存续,正常,开业,在业'
                }
            },
            deep:true,
        },
        'pgData.city':function(n,o){
            this.deSearch();
        },
        'pgData.dwtype':function(n,o){
            this.deSearch();
        },
        'pgData.orgType':function(n,o){
            this.deSearch();
        },
        'pgData.dwstatus':function(n,o){
            this.deSearch();
        },

        'cityNames':{
            handler(n,o){
                if(n && n.length !==0){
                    this.transferCityIds = n;
                } else {
                    this.transferCityIds = this.provinceIds;
                }
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        ...mapActions({
            queryCity: 'city/queryCities',
            queryWeather: 'city/queryWeather',
        }),
        deSearch:function(){
            this.$refs.page.queryData();
        },
        reload:function(){
            this.$refs.page.reload();
        },

        getNoticeData() {
            this.noticeList = [
                {
                    label: "拟建项目",
                    id: "1",
                    children: [],
                },
                {
                    label: "采购意向",
                    id: "2",
                    children: [],
                },
                {
                    label: "招标预告",
                    id: "3",
                    children: [],
                },
                {
                    label: "招标公告",
                    id: "4",
                    children: [
                        {
                            label: "招标",
                            id: "401",
                        },
                        {
                            label: "邀标",
                            id: "402",
                        },
                        {
                            label: "询价",
                            id: "403",
                        },
                        {
                            label: "竞谈",
                            id: "404",
                        },
                        {
                            label: "单一",
                            id: "405",
                        },
                        {
                            label: "竞价",
                            id: "406",
                        },
                        {
                            label: "变更",
                            id: "407",
                        },
                    ],
                },
                {
                    label: "招标结果",
                    id: "5",
                    children: [
                        {
                            label: "中标",
                            id: "501",
                        },
                        {
                            label: "成标",
                            id: "502",
                        },
                        {
                            label: "废标",
                            id: "503",
                        },
                        {
                            label: "流标",
                            id: "504",
                        },
                    ],
                },
                {
                    label: "招标信用信息",
                    id: "6",
                    children: [
                        {
                            label: "合同",
                            id: "601",
                        },
                        {
                            label: "验收",
                            id: "602",
                        },
                        {
                            label: "违规",
                            id: "603",
                        },
                    ],
                },
            ];
        },
        titleClick(data){
            // this.goto({
            //     path:'./portraits',
            //     query:{
            //         guid:data.guid,
            //         company:data.searchname
            //     }
                
            // })
            let routeData = this.$router.resolve({
                path: '/portraits',
                query:{
                    guid:data.guid,
                    company:data.searchname
                }
            });
            window.open(routeData.href, '_blank');
        },
        getqyList() {
            this.$get(`${this.$store.state.api.tbUrl}/searchrelated/getqytype.json`, {}, (data) => {
                this.qyList = data;
            }) 
        },

        //重置
        reset() {
            this.$refs.city.reset();
            this.$refs.dw.reset();
            this.$refs.qy.handlerAllClick();
            this.$refs.qyState.handlerAllClick();
        },

        provinceClickHandler(item) {
            var {valueid} = item;

            this.cityListByProvinceSel = this.$store.getters['city/getCitiesByProvinceCode'](valueid);
        },
        
        cityAfterQuery(item, index) {
            this.setCzc(['首页', '筛选' , '推荐内容选择城市', index ,'home-select-logonCity'])
        },
        dwAfterQuery(item, index) {
            this.setCzc(['首页', '筛选' , '推荐内容单位类型', index ,'home-select-unitType'])
        },
        qylxAfterQuery(item, index) {
            this.setCzc(['首页', '筛选' , '推荐内容企业类型', index ,'home-select-enterpriseType'])
        },
        qyztAfterQuery(item, index) {
            this.setCzc(['首页', '筛选' , '推荐内容企业状态', index ,'home-select-enterpriseState'])
        },
        businessAfterQuery(rows , data) {
            this.setCzc(['首页', '翻页' , '查企业', this.$refs.page.currentPage ,'home-page-businessLookup'])
        },     

    },
    mounted() {
        this.getqyList();

        this.queryWeather();
        this.queryCity();
    },
};
</script>

<style lang="scss" scoped>
@import "@css/var.scss";
.recommended-business {

    .business-content {
        .items {
            & + .items {
                margin-top: 16px;
            }

            .item-info {
                margin-top: 6px;

                .info-row{
                    display: flex;

                    .col{
                        flex: 1;
                    }

                    & + .info-row{
                        margin-top: 4px;
                    }
                }

                .el-link {
                    font-size: 12px;
                }
            }
        }
    }
    .pagination{
        margin-top: 20px;
    }
}
</style>